<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>注册--洋码头-购在全球,更多洋货 海外购_海外购物网_正品保障_海外直邮_正品低价</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
     <!-- 处理默认样式 -->
     <link rel="stylesheet" href="./css/reset.css">
     <link rel="stylesheet" href="./css/register.css">
      <!-- 引入网页标题图标 -->
      <link rel="shortcut icon" href="./favicon.ico">
       <!--引入JQUERY-->
    <script type="text/javascript" src="./js/jquery-3.6.0-min.js"></script>
   
</head>
<body>
<!-- 上 -->
<div class="top">
    <div class="middle">
        <div class="left">
            <a href="">
                <img src="./images/loginlogo.png" alt="">
            </a>
        </div>
        <div class="right">
            <a class="item" href="./login.html">请登录</a>
            <div class="item">
                <ul class="down ">
                    <li>
                        <a class="txt " href="./register.html">买家注册</a>
                    </li>
                    <li>
                        <a class="txt"  href="#">卖家注册认证</a>
                    </li>
                </ul>
                <a class="item" href="./register.html"><span>快速注册</span><i class="sanjiao"></i></a>
            </div>
            <div class="item">
                <a class="item" href="./register.html"><span>我的码头</span><i class="sanjiao"></i></a>
                <ul class="down">
                    <li>
                        <a class="txt"  href="./shopping.html">我的订单</a>
                    </li>
                    <li>
                        <a class="txt"  href="#">我的优惠券</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>
<!-- 下 -->
<div class="register">
    <div class="tou">
        <a href="">注册</a>
    </div>
    <!-- 注册内容部分 -->
    <form action="">
        <table>
            <tr>
                <td>用户名：</td>
                <td><input type="text" placeholder="请输入用户名" name="username"></td>
            </tr>
            <tr>
                <td>手机号码：</td>
                <td><input type="text" placeholder="请输入手机号" name="tel"> </td>
            </tr>
            <tr>
                <td>登录密码：</td>
                <td><input type="password" placeholder="请输入密码" name="password"></td>
            </tr>
            <tr>
                <td>确认密码：</td>
                <td><input type="password" placeholder="请输入确认密码" name="rpassword"></td>
            </tr>
            <tr>
                <td>昵称：</td>
                <td><input type="text" placeholder="请输入昵称" name="nickname"></td>
            </tr>
            <tr>
                <td></td>
                <td class="zhuce"><input type="submit" value="注册"></td>
            </tr>
        </table>
    </form>
</div>
</body>
 <!-- 引入弹出框 -->
 <script src="./layer/layer.js"></script>
  
<script>
var username=$('[name="username"]')
var tel=$('[name="tel"]')
var password=$('[name="password"]')
var rpassword=$('[name="rpassword"]')
var nickname=$('[name="nickname"]')


// 验证表单
$('form').on('submit',function(){
    var reg=/^[a-zA-Z0-9]\w{4,11}$/
    if(!reg.test(username.val())){
        layer.msg('用户名不符合规范，应字母或数字开头，5-13位组成',{
            time:1000,
            icon:2
        });
        return false
    }
    var reg=/^\w{6,12}$/
    if(!reg.test(password.val())){
        layer.msg('密码不符合规范',{
            time:1000,
            icon:2
        });
        return false
    }
    if(password.val() !==rpassword.val()){
        layer.msg('两次密码不一致',{
            time:1000,
            icon:2
        });
        return false
    }
    var reg=/^1[3456789]\d{9}$/
    if(!reg.test(tel.val())){
        layer.msg('手机号不正确',{
            time:1000,
            icon:2
        });
        return false
    }
    if(nickname.val()===''){
        layer.msg('昵称不能为空',{
            time:1000,
            icon:2
        });
        return false
    }
    
    // 调用Ajax
    var xhr=new XMLHttpRequest;
    xhr.open('post','/api/register');
    xhr.setRequestHeader('content-type','application/x-www-form-urlencoded')
    xhr.send(`username=${username.val()}&password=${password.val()}&tel=${tel.val()}&nickname=${nickname.val()}`)
    xhr.onreadystatechange=function(){
        if(xhr.readyState===4){
            if(xhr.status>=200 && xhr.status<300){
                var res=xhr.responseText
                res = JSON.parse(res);
                console.log(res);
                var {code,msg}=res
                // alert(msg)
                if(code===1){
                    layer.msg(msg,{
                        time:1000,
                        icon:1
                    },function(){
                        location.href='/login.html'
                    })
                }else{
                    layer.msg(msg,{
                        time:1000,
                        icon:2
                    },function(){
                        username.val('')
                        password.val('')
                        rpassword.val('')
                        tel.val('')
                        nickname.val('')
                    })
                }

            }

        }
    }
    return false
})
</script>
</html>